<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-editable"></table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script type="text/javascript" src="../../../js/jquery-3.3.1.min.js"></script>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../../layui/layui.js"></script>
<script src="../../../layer/layer.js"></script>
<script>
    layui.use(function () {
        var table = layui.table;
        var util = layui.util;
        // 根据返回数据中某个字段来判断开启该行的编辑
        // var editable = function (d) {
        //     if (d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
        // };
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-editable',
            url: '/lshjsonData', // 此处为静态模拟数据，实际使用时需换成真实接口
            // url: '', // 此处为静态模拟数据，实际使用时需换成真实接口
            // page: true,
            //,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
            css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view td[data-edit]{color: #16B777;}'
            ].join(''),
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '用户名'}
            ]],
            height: 310
        });
        // 单元格编辑后的事件
        // table.on('edit(ID-table-demo-editable)', function (obj) {
        //     var field = obj.field; // 得到修改的字段
        //     var value = obj.value // 得到修改后的值
        //     var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
        //     var data = obj.data // 得到所在行所有键值
        //     var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
        //
        //     // 值的校验
        //     if (value.replace(/\s/g, '') === '') {
        //         layer.tips('值不能为空', this, {tips: 1});
        //         return obj.reedit(); // 重新编辑 -- v2.8.0 新增
        //     }
        //     // 编辑后续操作，如提交更新请求，以完成真实的数据更新
        //     // …
        //
        //     // 显示 - 仅用于演示
        //     layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
        // });
    });
</script>

</body>
</html>